<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    canvas {
        position: fixed;
        top: 0;
        left: 0;
        background: #222;
        /*样式尺寸 */
        width: 100%;
        height: 100%;
    }
</style>
<body>
<canvas></canvas>
</body>
<script>
    //随机生成辅助函数
    function getRandom(min, max) {
        return Math.floor(Math.random() * (max + 1 - min) + min);
    }


    const cvs = document.querySelector('canvas');
    const ctx = cvs.getContext('2d');

    class point {
        constructor() {
            this.r = 6
            this.x = getRandom(0, cvs.width - this.r / 2);
            this.y = getRandom(0, cvs.height - this.r / 2);
            //点横向移动的速度
            this.xSpeed = getRandom(-50, 50)
            this.ySpeed = getRandom(-50, 50)
            //上一次作画的时间
            this.lastDrawTime = null
        }

        draw() {
            //更新坐标
            if (this.lastDrawTime ){
                //计算新的坐标
                const deltaTime = (Date.now() - this.lastDrawTime)/1000
                this.x += this.xSpeed * deltaTime
                this.y += this.ySpeed * deltaTime
                if (this.x > cvs.width - this.r / 2 || this.x < this.r / 2){
                    this.xSpeed = -this.xSpeed
                }
                if (this.y > cvs.height - this.r / 2 || this.y < this.r / 2){
                    this.ySpeed = -this.ySpeed
                }
            }
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
            ctx.fillStyle = 'rgb(200,200,200)';
            ctx.fill();
            this.lastDrawTime = Date.now()
        }
    }

    class Graph {
        constructor(pointNumber = 50, maxDis = 350) {
            this.points = new Array(pointNumber).fill(0).map(() => new point());
            this.maxDis = maxDis;
        }

        draw() {
            requestAnimationFrame(()=>{
                this.draw()
            })
            ctx.clearRect(0, 0, cvs.width, cvs.height)
            for (let i = 0; i < this.points.length; i++) {
                const point = this.points[i];
                point.draw()
                for (let j = i + 1; j < this.points.length; j++) {
                    const point2 = this.points[j];
                    //两点之间距离
                    const d = Math.sqrt(Math.pow(point.x - point2.x, 2) + Math.pow(point.y - point2.y, 2));
                    if (d > this.maxDis) {
                        continue
                    }
                    const alpha = 1 - d / this.maxDis;
                    ctx.beginPath()
                    ctx.moveTo(point.x, point.y)
                    ctx.lineTo(point2.x, point2.y)
                    ctx.strokeStyle = `rgba(200,200,200,${alpha})`;
                    ctx.stroke()
                }
            }
        }
    }

    function init() {
        // 原始尺寸 = 样式尺寸 * 缩放倍率 就能保证图片不模糊
        cvs.width = window.innerWidth * devicePixelRatio;
        cvs.height = window.innerHeight * devicePixelRatio;
    }

    init()
    const p1 = new Graph();
    p1.draw()

</script>
</html>